<template>
  <div class="w-[100%] relative flex justify-center">
    <div
      class="
        absolulte
        top-6
        z-50
        mx-auto
        bg-black
        text-white
        px-14
        py-3
        rounded-sm
      "
      :class="errorType ? 'visible' : 'invisible'"
    >
      {{error}}
    </div>
  </div>
</template>
<script setup>
const props = defineProps(['errorType'])
const { errorType } = toRefs(props)

let error = ref('')

watch(() => errorType.value, () => {
  if(errorType.value === 'caption') {
    error.value = 'Maximum 150 characters'
  }
})
</script>